<template>
	<view id="box_top" v-if="list1.length>0">
		<u-tabs :list="list1" @click="clicklist1" :scrollable='true' :current='keycont'></u-tabs>
		<view class="" style="position: relative;">
			<view class="icon_qie" v-if="carName!='长途大车'">
				<view @click.stop.prevent="qiehuan(0)"><u-icon name="arrow-left"></u-icon></view>
				<view @click.stop.prevent="qiehuan(1)"><u-icon name="arrow-right"></u-icon></view>
			</view>
			<swiper :autoplay="false" :current='keycont' class="swiper" @change='changeSwiper' v-if="carName!='长途大车'">
				<swiper-item v-for="(item,i) in list1" style="padding-bottom: 30rpx;">
					<view class="swiper-item">
						<view class="swiper_flx">
							<image :src="item.image" mode="widthFix" class="swiper-image"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="carName!='长途大车'">
			<view class="swiper-box" style="height: 100rpx;">
				<view class="swiper-box_sun">
					<view>{{list1[keycont].length}}m</view>
					<view>厢长</view>
				</view>
				<view class="swiper-box_sun">
					<view>{{list1[keycont].capacity}}方</view>
					<view>载方</view>
				</view>
				<view class="swiper-box_sun">
					<view>{{list1[keycont].loads}}吨</view>
					<view>载重</view>
				</view>
				<view class="swiper-box_sun">
					<view>{{list1[keycont].height}}m</view>
					<view>车高</view>
				</view>
			</view>
		</view>

		<view class=" " v-if="carName!='长途大车'">
			<view class="timeLove">
				<view class="one">能源：</view>
				<view class="two">
					<view class="first_order"
						:style="showNe ? 'color:#579AA3;border: 1rpx solid #579AA3;':'border: 1rpx solid #e5e5e5;'"
						@click="nengyuan()">
						{{list1[keycont].energyType}}
						<image v-show="showNe" src="@/static/order/tag.png" class="tag"></image>
					</view>

				</view>
			</view>
			<view class="timeLove" v-if="list1[keycont].modelType.length>0">
				<view class="one">车型：</view>
				<view class="two">
					<view v-for="(item,index) in list1[keycont].modelType" class="first_order"
						:style="item.Isshow ? 'color:#579AA3;border: 1rpx solid #579AA3;':'border: 1rpx solid #e5e5e5;'"
						:v-model="item" @click="typeXin(item)">
						{{item.name}}
						<image v-show="item.Isshow" src="@/static/order/tag.png" class="tag"></image>
					</view>
				</view>
			</view>

			<view class="timeLove" v-if="list1[keycont].carType.length>0">
				<view class="one">车厢：</view>
				<view class="two">
					<view v-for="(item,index) in list1[keycont].carType" class="first_order"
						:style="item.Isshow ? 'color:#579AA3;border: 1rpx solid #579AA3;':'border: 1rpx solid #e5e5e5;'"
						:v-model="item" @click="typeXin(item)">
						{{item.name}}
						<image v-show="item.Isshow" src="@/static/order/tag.png" class="tag"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="" v-else>
			<view class="timeLove">
				<view class="one">厢长：</view>
				<view class="two">
					<view v-for="(item,index) in longDistanceTruckVos.longDistanceTrucks" class="first_order"
						:style="formdata.carType==item.name ? 'color:#579AA3;border: 1rpx solid #579AA3;':'border: 1rpx solid #e5e5e5;'"
						:v-model="item" @click="dianxsa(item)">
						{{item.name}}
						<image v-show="formdata.carType==item.name" src="@/static/order/tag.png" class="tag"></image>
					</view>
				</view>
			</view>
			<view class="zhongjia" v-for="(item,index) in longDistanceTruckVos.longDistanceTrucks">
				<view class="zhosna" v-if="formdata.carType==item.name">载方：{{item.loads}}方 载重：{{item.capacity}}吨
				</view>
			</view>

			<view class="timeLove">
				<view class="one">车型：</view>
				<view class="two">
					<view v-for="(item,index) in longDistanceTruckVos.modelType" class="first_order"
						:style="item.Isshow ? 'color:#579AA3;border: 1rpx solid #579AA3;':'border: 1rpx solid #e5e5e5;'"
						:v-model="item" @click="typeXin(item)">
						{{item.name}}
						<image v-show="item.Isshow" src="@/static/order/tag.png" class="tag"></image>
					</view>
				</view>
			</view>
		</view>






	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				list1: [],
				longDistanceTruckVos: {},
				keycont: 0,
				timeLove: [{
						name: "即时",
						id: 1,
					},
					{
						name: "预约单",
						id: 2,
					},

				],
				formdata: {
					need: '',
					mode: '',
					name: '',
					carType: ''
				},
				carName: '',
				name: '4米2',
				showNe: false,
			}
		},

		created() {

			

		},

		mounted() {
			this.cread()



		},
		computed: {
			...mapState({
				order: state => state.order.order,
			})
		},
		methods: {
			...mapMutations('order', ['carOder', 'Primitive']),
			async cread() {
				let res = await this.$http.address.get_vehicle_model_list()
				this.list1 = res.data.data.homeVehicleModelVoList
				this.list1.forEach((item, i) => {
					item.carType.forEach((meth, k) => {
						this.list1[i].carType[k] = {
							name: meth,
							Isshow: false
						}
					})
					item.modelType.forEach((motd, k) => {
						if (k < 3) {
							this.list1[i].modelType[k] = {
								name: motd,
								Isshow: true
							}
						} else {
							this.list1[i].modelType[k] = {
								name: motd,
								Isshow: false
							}
						}
					})
				})
				this.longDistanceTruckVos = res.data.data.longDistanceTruckVos
				this.list1.push({
					name: '长途大车'
				})
				this.longDistanceTruckVos.modelType.forEach((item, i) => {
					this.longDistanceTruckVos.modelType[i] = {
						name: item,
						Isshow: false
					}
				})

				this.list1 = JSON.parse(JSON.stringify(this.list1))
				this.longDistanceTruckVos = JSON.parse(JSON.stringify(this.longDistanceTruckVos))


				if (this.order.shipperOrderDetailDto.carTypeNeeds.name) {
					this.list1.forEach((item, i) => {
						if (this.order.shipperOrderDetailDto.carTypeNeeds.name == item.name) {
							this.keycont = i
							this.formdata.name = item.name
							this.carName = item.name
						}
					})
					for (let k in this.formdata) {
						this.formdata[k] = this.order.shipperOrderDetailDto.carTypeNeeds[k]
					}
					if(this.formdata.need=='新能源'){
						this.showNe=true
						
					}
				} else {
					this.formdata.name = this.list1[0].name
				}
				// console.log(this.formdata) 
				this.formdata = JSON.parse(JSON.stringify(this.formdata))
				if (this.carName != '长途大车') {
					this.list1[this.keycont].carType.forEach(item => {
						this.formdata.carType.forEach(meth => {
							if (item.name == meth.name) {
								item.Isshow = true
							}
						})
					})
					this.list1[this.keycont].modelType.forEach(item => {
						this.formdata.mode.forEach(meth => {
							if (item.name == meth.name) {
								item.Isshow = true
							}
						})
					})
				} else {
					this.longDistanceTruckVos.modelType.forEach(item => {
						this.formdata.mode.forEach(meth => {
							if (item.name == meth.name) {
								item.Isshow = true
							}
						})
					})
				}
			},
			dianxsa(item) {
				this.formdata.carType = item.name
				this.carOder(this.formdata)
			},
			nengyuan() {
				this.showNe = !this.showNe
				let data
				if (!this.showNe) {
					data = {
						need: '燃油'
					}
				} else {
					data = {
						need: '新能源'
					}
				}
				this.carOder(data)
			},
			typeXin(item) {
				item.Isshow = !item.Isshow
				
				this.huoque()
			},

			clicklist1(e) {
				this.keycont = e.index
				this.carName = e.name

				this.formdata.name = e.name
				if (this.keycont == 7) {
					this.formdata.name = '长途大车'
					this.formdata.carType = this.longDistanceTruckVos.longDistanceTrucks[0].name
				}

				this.huoque()
			},
			changeSwiper(e) {
				this.keycont = e.detail.current
				this.carName = this.list1[this.keycont].name
				if (this.keycont == 7) {
					this.formdata.name = '长途大车'
					this.formdata.carType = this.longDistanceTruckVos.longDistanceTrucks[0].name
				}
				this.huoque()
			},
			huoque() {
				let cont = []
				let type = []
				if (this.formdata.name != '长途大车') {

					this.list1[this.keycont].carType.forEach(item => {
						if (item.Isshow) {
							type.push(item)
						}
					})
					this.list1[this.keycont].modelType.forEach(item => {
						if (item.Isshow) {
							cont.push(item)
						}
					})
					this.formdata.carType = type
				} else {
					
					this.longDistanceTruckVos.modelType.forEach(item => {
						if (item.Isshow) {
							cont.push(item)
						}
					})
				}
				this.formdata.mode = cont
				this.carOder(this.formdata)

			},

			qiehuan(e) {
				if (e == 0) {
					if (this.keycont == 0) {
						return false
					}
					this.keycont--
				} else {
					if (this.keycont >= this.list1.length - 2) {
						this.carName = '长途大车'
						this.keycont = 7
						this.formdata.name = '长途汽车'
						this.formdata.carType = this.longDistanceTruckVos.longDistanceTrucks[0].name
						return false
					}
					this.keycont = this.keycont + 1
				}
				this.huoque()
			}

		}
	}
</script>

<style scoped>
	#box_top .zhosna {
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 80rpx;
	}

	#box_top .tag {
		width: 30upx;
		height: 30upx;
		z-index: 9;
		position: absolute;
		top: -3rpx;
		right: -3rpx;
	}

	#box_top .zhongjia {
		width: 90%;
		background-color: #F7F9FB;
		font-size: 28rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		color: #949494;

	}

	#box_top .first_order {
		position: relative;
		color: #666666;
		text-align: center;
		margin-right: 15upx;
		border-radius: 10upx;
		padding: 5rpx 20rpx;
		margin-top: 10rpx;
	}

	#box_top .two {
		font-size: 28upx;
		display: flex;
		flex-wrap: wrap;
		width: 90%;
	}

	#box_top .one {
		font-size: 30rpx;
		color: #666666;
		width: 100rpx;
		margin-top: 10rpx;
	}

	#box_top .timeLove {
		box-sizing: border-box;
		display: flex;
		margin: 10upx 0upx;

		margin-left: 20rpx;
	}

	#box_top {
		width: 710rpx;
		background-color: #fff;
		margin-left: 20rpx;
		border-radius: 0 0 20rpx 20rpx;
		padding-bottom: 30rpx;
		position: relative;
	}

	#box_top .swiper-box_sun {
		font-size: 25rpx;
		width: 25%;
		text-align: center;
	}

	#box_top .swiper-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#box_top .swiper-image {
		width: 500rpx;
		height: 200rpx;
		margin-top: 30rpx;

	}

	#box_top .swiper_flx {
		display: flex;
		justify-content: center;

	}

	#box_top .swiper-box {
		width: 650rpx;
		height: 200rpx;
		background-color: #F7F9FB;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}

	#box_top .swiper-item {
		width: 600rpx;
		height: 300rpx;
		padding-bottom: 30rpx;
	}

	#box_top .swiper {
		width: 600rpx;
		height: 300rpx;
		padding-bottom: 30rpx;
		margin-left: 50rpx;
	}

	#box_top .icon_qie {
		width: 95%;
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 30%;
		margin-left: 2.5%;
	}
</style>